<template>
  <div>
    <!-- <div :style="`--el-table-border:${isDark ? '1px solid rgba(246, 247, 251, 0.1);' : '1px solid #ebeef5'}`"> -->
    <RePage class="system-settings">
      <div class="border-b-[1px] h-[34px] border-[#ECEDF0] dark:border-[#3C4054] mb-[16px] flex gap-[4px] boderRight">
        <div v-for="(item, index) in tableData" :key="index"
          class="border-[1px] mr-[1px] text-[14px] px-[16px] roundeds h-[34px] flex items-center justify-center cursor-pointer transition-all duration-300"
          :class="activeIndex == index
            ? 'text-[#fff]  bg-[var(--el-color-primary)] border-[var(--el-color-primary)] h-[33px]'
            : 'border-[#ECEDF0] text-[#666666] dark:text-[#9794A2] dark:border-[#3C4054]'
            " @click="change(index)">
          {{ isNullOrEmpty(item.group) }}
        </div>
      </div>
      <div ref="tabsRef" class="flex-1 flex flex-col" :style="`--tabsHeight:${tabsHeight}px`">
        <el-tabs v-model="childActiveIndex" tab-position="left" stretch class="flex-1 relative "
          @tab-change="changeTab">
          <el-tab-pane v-for="(item, index) in tableData[activeIndex]?.child" :label="item.name" :name="index">
            <!-- {{ isNullOrEmpty( showInfo ) }} -->
            <div ref="tabsBoxRef" class="w-full min-h-[var(--tabsHeight)]" v-loading="showInfoLoading">
              <div v-if="childActiveIndex == index">
                <el-form ref="ruleFormRef" label-width="auto" label-position="left" status-icon>
                  <SettingConfig v-auth="'system.config.info'" v-model:datas="showInfo.data"
                    :struct="showInfo?.struct" />
                  <el-form-item label=" " v-auth="'system.config.save'">
                    <el-button type="primary" @click="save">保存</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </RePage>
    <!-- <seeting-edit ref="seetingEditRef" @update="confirm"></seeting-edit>
    <seeting-info ref="seetingInfoRef"></seeting-info> -->
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import seetingEdit from "./seeting-edit.vue";
import seetingInfo from "./seeting-info.vue";
import { getConfigList, getConfigInfo, saveConfigs } from '@/api/manage/system-management/system-settings/index'
import { onMounted, ref } from "vue";
import { ArrowRight, Refresh } from "@element-plus/icons-vue";
import { message } from "@/utils/message";
import RePage from "@/components/RePage/index.vue";
import { addDialog } from "@/components/ReDialog";
import { customDebounce, customPromiseDebounce } from "@/utils/functions";
import { cloneDeep, isAllEmpty, deviceDetection, debounce } from "@pureadmin/utils";
import { useDark } from "@pureadmin/utils";
import SettingConfig from "@/components/SettingConfig/SettingConfig.vue";
const { isDark } = useDark();
const tableData = ref([])

const activeIndex = ref(0);
const childActiveIndex = ref(0);
const showInfoLoading = ref(false)
const showInfo = ref({} as any)
const tabsRef = ref()
const tabsBoxRef = ref()
const tabsHeight = ref(0)
const tabsMinHeight = ref(0)

onMounted(() => {
  tabsMinHeight.value = cloneDeep(tabsRef.value.clientHeight)
  getConfigList().then(res => {
    tableData.value = res.result.data
    loadShowInfo()
  })
})
const loadTabsHeight = () => {
  setTimeout(() => {
    if (tabsBoxRef.value) {
      tabsHeight.value = Math.max(tabsBoxRef.value[childActiveIndex.value].getBoundingClientRect().height, tabsMinHeight.value)
    } else {
      tabsHeight.value = tabsRef.value.clientHeight
    }
  }, 100)
}
const loadShowInfo = () => {
  showInfoLoading.value = true
  tabsHeight.value = tabsMinHeight.value

  getConfigInfo({
    alias: tableData.value[activeIndex.value].child[childActiveIndex.value].alias
  }).then(res => {
    showInfo.value = res.result
  }).catch(() => {
    showInfo.value = {}
  }).finally(() => {
    loadTabsHeight()
    showInfoLoading.value = false
  })
}
const change = (item: any) => {
  activeIndex.value = item;
  childActiveIndex.value = 0
  loadShowInfo()
};
const changeTab = (item) => {
  showInfo.value = {}
  loadShowInfo()
}

const save = () => {
  showInfoLoading.value = true
  DebounceEditInfo({
    config: showInfo.value.data,
    alias: tableData.value[activeIndex.value]?.child[childActiveIndex.value]?.alias
  }).then(res => {
    message(`操作成功`, {
      type: "success"
    });
    loadShowInfo()
  }).catch(() => {
    message(`操作失败`, {
      type: "error"
    });
  })
}

// 编辑请求
const DebounceEditInfo = customPromiseDebounce(saveConfigs, 1000, true);

</script>
<style scoped lang="scss">
.system-settings {
  ::v-deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    height: 100%;

    .el-tabs__header {

      .el-tabs__nav-wrap {
        min-height: var(--tabsHeight);

        .el-tabs__nav {
          gap: 32px;

          .el-tabs__item {
            height: 14px;
            min-width: 180px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            word-break: break-all;
          }
        }
      }
    }
  }
}

.roundeds {
  border-radius: 4px 4px 0 0;
}

.boderRight:nth-child(1) {
  border-left: 1px solid #ecedf0;
  border-top-left-radius: 4px;
}

.dark {
  .boderRight:nth-child(1) {
    border-left: 1px solid #3c4054;
    border-top-left-radius: 4px;
  }
}
</style>
